<template>
  <div class="home">
    <h2 class="title">Home</h2>
    <el-button>默认按钮</el-button>

    <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
    </el-switch>
    <!-- <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.title }} -- {{ item.count }} -- <button @click="item.count++">+</button>
      </li>
    </ul> -->
  </div>
</template>

<script>
// v-if  v-show
// 1. 后端返回很多数据，数据又不需要修改(只是做展示的作用)  数据冻结 Object.freeze
// 2. scss 中使用变量  定义函数  循环
// 2.vue.config.js中配置 css   >>  loaderOptions  >>  sass  >> prependData  ==》  ‘@import url;’

// 打包体积变小  4.46  
// 1. UI组件按需引入    (1.01)
// 2. 开启gzip压缩    (300kb)
// 3. 线上忽略调试代码
export default {
  name: "Home",
  data() {
    return {
      value: true,
      list: Object.freeze([
        {
          title: "我是标题1",
          count: 1,
        },
        {
          title: "我是标题2",
          count: 1,
        },
        {
          title: "我是标题3",
          count: 1,
        },
        {
          title: "我是标题4",
          count: 1,
        },
      ]),
    };
  },
  created() {
    console.log(this.list);
  },
};
</script>

<style lang="scss">
.title {
  color: $red;
}
</style>
